<template>
  <el-card shadow="never">
    <el-button type="primary" @click="showModel"> 新增分类 </el-button>
    <el-divider />
    <PlusTable
      :columns="tableConfig"
      :table-data="tableData"
      :title-bar="false"
      :action-bar="{
        buttons: buttons,
        type: 'button',
        width: '100px'
      }"
    />

    <PlusDialogForm
      v-model:visible="visible"
      v-model="values"
      :form="{
        columns: tableConfig,
        rules
      }"
      class="max-w-[90%]"
      @confirm="formConfirm"
    />
  </el-card>
</template>

<script lang="ts" setup>
import { useTable } from "plus-pro-components";
import type {
  PlusColumn,
  OptionsRow,
  ButtonsCallBackParams,
  FieldValues
} from "plus-pro-components";
import { ref } from "vue";
import goodApi from "@/api/good";
import { message } from "@/utils/message";
defineOptions({
  name: "goodType"
});
const visible = ref(false);
const values = ref<FieldValues>();
const rules = {
  name: [
    {
      required: true,
      message: "请输入名称"
    }
  ]
};
const showModel = () => {
  values.value = {
    name: ""
  };
  visible.value = true;
};
const formConfirm = async () => {
  try {
    await goodApi.goodTypeCreate(values.value);
    message("添加成功", { type: "success" });
    visible.value = false;
    getList();
  } catch (error) {}
};

const TestServe = {
  getList: async () => {
    const { data } = await goodApi.goodTypeList();
    return { data };
  }
};
const { tableData, buttons } = useTable();

buttons.value = [
  {
    text: "删除",
    code: "delete",
    props: { type: "danger" },
    confirm: {
      options: { draggable: true }
    },
    async onConfirm({ row }: ButtonsCallBackParams) {
      try {
        await goodApi.goodTypeDelete([row.id]);
        message("操作成功", { type: "success" });
      } catch (error) {}
    }
  }
];

const tableConfig: PlusColumn[] = [
  {
    label: "名称",
    prop: "name"
  }
];

const getList = async () => {
  try {
    const { data } = await TestServe.getList();
    tableData.value = data;
  } catch (error) {}
};
getList();
</script>
